<template>
  <view class="popup-style" :style="'margin-bottom:' + globalData.customizeInfo.safeAreaBottom + 'rem;'">
    <view class="flb">
      <view class="popup-title">您有待评价的需求</view>
      <!-- <img src="/static/img/procurement/close_icon.png" class="small_icons" @click="closePopup" /> -->
    </view>
    <view class="box-content mt20">
      <view class="fla">
        <text class="pdr12 fz16" style="font-weight: 700">{{ paramsObj.contact ? paramsObj.contact[0] : '' }}{{ paramsObj.publisherGender === 'female' ? '女士' : '先生' }}</text>
        <text class="fw400 fz14 pdr12" style="color: #383838">{{ displayPhoneNumber(paramsObj.contactPhoneNumber) }}</text>
        <view class="common-box-cg">{{ showType == 1 ? '采购' : '销售' }}</view>
      </view>
      <view class="box-desc line-clamp-2">{{ paramsObj.detailInfo }}</view>
      <view class="flb fw400 fs14" style="color: #808080; padding-top: 12rem">
        <text>{{ paramsObj.createTime }}</text>
        <text>{{ connectTimeLength }}</text>
      </view>
    </view>
    <view class="other-label"> 平台将根据您的评价，对他进行奖励或者处罚！ </view>

    <view class="popup-title fla">
      <text class="pdr12">好评度</text>
      <uni-rate size="20" v-model="confirmInfo.score" @change="setContent()" />
    </view>

    <view class="other-label">注：只有3星及3星以上评价才能看到对方真实联系方式</view>

    <view class="box-content">
      <textarea placeholder="真实需求，五星好评！" v-model="confirmInfo.content" maxlength="150" placeholder-style="color: #A6A6A6;font-size:14rem;"></textarea>
    </view>
    <view class="flb fla" style="margin-top: 45rem">
      <view class="flcstart" style="" @click="changeState()">
        <view class="fla">
          <image v-if="confirmInfo.isAnonymous === 1" class="bottom-check" src="@/static/img/global/check-true.png"></image>
          <image v-else class="bottom-check" src="@/static/img/global/check-false.png"></image>
          <text class="fw500 fs14" style="color: #383838">匿名</text>
        </view>
        <text class="fs14 fw400" style="color: #a6a6a6">匿名将隐藏您的信息</text>
      </view>
      <view class="submit-btn" @click="confirm">提交</view>
    </view>
  </view>
</template>
<script>
const api = require('@/utils/request.js');
import commonMxins from '@/mixins/common.js';
export default {
  mixins: [commonMxins],
  name: 'ToBeEvaluated',
  props: {
    targetIdInfo: {
      type: Object,
      default: () => {}
    },
    showType: {
      type: Number,
      default: 1
    }
  },
  watch: {
    'targetIdInfo.targetId'() {
      this.searchData();
    }
  },
  computed: {
    connectTimeLength() {
      if (this.targetIdInfo.startTime && this.targetIdInfo.releaseTime) {
        const startNum = new Date(this.targetIdInfo.startTime).getTime();
        const endNum = new Date(this.targetIdInfo.releaseTime).getTime();
        // 将毫秒数转换为秒
        const diffInSeconds = Math.floor((endNum - startNum) / 1000);
        // 计算分钟和秒
        const minutes = Math.floor(diffInSeconds / 60);
        const seconds = diffInSeconds % 60;
        // 格式化为 "mm:ss"
        return `${minutes.toString().padStart(2, '0')}分${seconds.toString().padStart(2, '0')}秒`;
      } else {
        return '';
      }
    }
  },
  data() {
    return {
      getInfoUrl: ['', '/purchaseInfo/getInfo', '/saleInfo/getInfo'],
      commontUrl: ['', '/purchaseInfo/comment', '/saleInfo/comment'],
      confirmData: ['', { purchaseInfoId: '' }, { saleInfoId: '' }],
      paramsObj: {
        detailInfo: ''
      },
      confirmInfo: {
        score: 5,
        content: '真实需求，5星好评！',
        isAnonymous: 1 // 1-匿名 2-不匿名
      }
    };
  },
  methods: {
    async searchData() {
      this.confirmData = ['', { purchaseInfoId: this.targetIdInfo.targetId }, { saleInfoId: this.targetIdInfo.targetId }];
      const res = await api.request({ url: this.getInfoUrl[this.showType], data: this.confirmData[this.showType], method: 'GET' });
      this.paramsObj = res.data;
      this.confirmInfo = {
        score: 5,
        content: '真实需求，5星好评！',
        isAnonymous: 1
      };
    },
    setContent() {
      this.confirmInfo.content = `真实需求，${this.confirmInfo.score}星好评！`;
    },
    confirm() {
      uni.$u.throttle(this.inserData, 500);
    },
    async inserData() {
      await api.request({ url: this.commontUrl[this.showType], data: { ...this.confirmData[this.showType], ...this.confirmInfo, historyContactRecordId: this.targetIdInfo.historyContactRecordId }, method: 'POST' });
      this.closePopup();
    },
    changeState() {
      this.confirmInfo.isAnonymous = this.confirmInfo.isAnonymous === 1 ? 2 : 1;
    },
    closePopup() {
      uni.removeStorageSync('showEvaluatedInfo');
      this.$emit('closePopup');
    }
  }
};
</script>

<style lang="scss" scoped>
.flcstart {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
}
.fw400 {
  font-weight: 400;
}
.fw500 {
  font-weight: 500;
}
.fz14 {
  font-size: 14rem;
}
.fz16 {
  font-size: 16rem;
}
.mt20 {
  margin-top: 20rem;
}
.pdr12 {
  padding-right: 12rem;
}
.popup-style {
  width: 380rem;
  height: 480rem;
  padding: 20rem 25rem 0 25rem;
}
.submit-btn {
  width: 172rem;
  height: 36rem;
  opacity: 1;
  border-radius: 50rem;
  background: #ff7c00;
  font-size: 16rem;
  font-weight: 500;
  line-height: 36rem;
  color: rgba(255, 255, 255, 1);
  text-align: center;
}
.common-box-cg {
  width: 40rem;
  height: 22rem;
  border-radius: 3rem;
  background: #ffc300;
  font-size: 12rem;
  font-weight: 400;
  line-height: 22rem;
  text-align: center;
  color: rgba(255, 255, 255, 1);
}
.small_icons {
  width: 24rem;
  height: 24rem;
}
.niming-label {
  font-size: 14rem;
  font-weight: 400;
  line-height: 20.27rem;
  color: rgba(166, 166, 166, 1);
  text-align: left;
}
.popup-title {
  font-size: 18rem;
  font-weight: 700;
  line-height: 26.06rem;
  color: rgba(56, 56, 56, 1);
  text-align: left;
}
.box-content {
  box-sizing: border-box;
  width: 380rem;
  padding: 12rem 18rem;
  height: 132rem;
  border-radius: 5rem;
  background: rgba(240, 240, 240, 1);
}
.box-desc {
  font-size: 16rem;
  padding-top: 8rem;
  font-weight: 500;
  line-height: 23.17rem;
  color: rgba(56, 56, 56, 1);
  text-align: left;
}
.other-label {
  font-size: 12rem;
  padding: 5rem 0 12rem 0;
  font-weight: 400;
  line-height: 17.38rem;
  color: rgba(166, 166, 166, 1);
  text-align: left;
}

.bottom-check {
  width: 13rem;
  height: 13rem;
  border-radius: 50%;
  margin-right: 4rem;
}
</style>
